<template>
<div style="margin-top: 20px;">
 <div>
   <van-nav-bar
   title="产品列表"
   left-arrow
   @click-left="onClickLeft"
   /> 
 </div>
 <div>
 <van-row>
  <van-col span="4">
    <h4>全国<van-icon name="arrow-down" /></h4>
  </van-col>
  <van-col span="17">
    <van-search v-model="value" />
  </van-col>
  <van-col span="3">
    <h4><van-icon name="list-switching" /></h4>
  </van-col>
 </van-row>
 </div>

<!-- 弹出 -->
 <div>
  <div style="display: inline-block;width: 25%;">
   <van-dropdown-menu> 
   <van-dropdown-item v-model="value1" :options="option1" ></van-dropdown-item>
   </van-dropdown-menu>
  </div>
  <div style="display: inline-block;width: 25%;">
   <van-dropdown-menu class="custom-dropdown-menu"> 
   <van-dropdown-item v-model="value2" :options="option2" ></van-dropdown-item>
   </van-dropdown-menu>
  </div>
  <div style="display: inline-block;width: 25%;">
    <van-dropdown-menu class="custom-dropdown-menu"> 
   <van-dropdown-item v-model="value3" :options="option3" ></van-dropdown-item>
   </van-dropdown-menu>
  </div>
  <div style="display: inline-block;width: 25%;">
   <van-cell title="筛选" @click="showPopup" ><van-icon name="filter-o" /></van-cell>
   <van-popup v-model:show="show" position="right" :style="{ width:'80%' ,height: '100%' }">sss</van-popup>
  </div>
  
 </div>
</div>

</template>

<script setup>
import {ref} from "vue"
import 'vant/lib/index.css';

const onClickLeft = () => history.back();
const value = ref('');
const show = ref(false);
const showPopup = () => {
     show.value = true;
};
const value1 = ref(0);
const value2 = ref('成新度');
const value3=ref('租期')
const option1 = [
    { text: '综合排序', value: 0 },
    { text: '价格升序', value: 1 },
    { text: '价格降序', value: 2 },
    { text: '销量升序', value: 3 },
    { text: '销量降序', value: 4 },
];
const option2 = [
    { text: '全新', value: 'a' },
    { text: '99新', value: 'b' },
    { text: '90新', value: 'c' },
    { text: '准新', value: 'd' },
    { text: '95新', value: 'e' },
    { text: '80新', value: 'f' },
];
const option3=[
  {text:'3天内',value:0},
  {text:'30天',value:1},
  {text:'180天',value:2},
  {text:'7天',value:3},
  {text:'90天',value:4},
  {text:'365天',value:5},
];
</script>

<style scoped>
.custom-dropdown-menu.van-dropdown-menu__list {
   display: flex;
   justify-content: space-between;
}
</style>
